<template>
    <div class="warp v-home">
        <van-tabs v-model="tabActive" swipeable animated @change="tabChange" >
             <van-tab :title="'精选'" >
                <div class="v-body">
                    <van-swipe class="v-swipe" :autoplay="3000">
                        <van-swipe-item v-for="(banner, index) in bannerData">
                            <div class="v-swipe-item">
                                <a :href="'#/detail/'+banner.vid">
                                    <img v-lazy="banner.pic" />
                                    <span>{{banner.vname}}</span>
                                </a>
                            </div>
                        </van-swipe-item>
                    </van-swipe>
                    <van-row gutter="10" class="v-commend">
                         <van-col span="8">
                            <div class="v-commend-item">
                                <a href="#/list"><h4>全部<i class="iconfont i552cc13f75722 purple-color"></i></h4></a>
                            </div>
                        </van-col>
                        <van-col span="8">
                            <div class="v-commend-item">
                                <a href="#/collect"><h4>喜欢<i class="iconfont icollection theme-color"></i></h4></a>
                            </div>
                        </van-col>
                        <van-col span="8">
                            <div class="v-commend-item">
                                <a href="#/history"><h4>历史<i class="iconfont ihistory blue-color"></i></h4></a>
                            </div>
                        </van-col>
                        <van-col span="8">
                            <div class="v-commend-item">
                                <a href="#/ranklist"><h4>排行榜<i class="iconfont ipaihangbang orange-color"></i></h4></a>
                            </div>
                        </van-col>
                        <van-col span="8">
                            <div class="v-commend-item">
                                <a href="#/cache"><h4>缓存<i class="iconfont ixiazai black-color"></i></h4></a>
                            </div>
                        </van-col>
                    </van-row>
                    
                    <section v-for="dataItem in dataList">
                        <h2 class="v-title">{{dataItem.name}}<i class="iconfont inext"></i></h2>
                        <van-row gutter="10">
                            <van-col span="8" class="v-item" v-for="item in dataItem.dataList">
                            <a :href="'#/detail/'+item.vid">
                                <div class="v-item-imghd">
                                    <img v-lazy="item.vpic" />
                                    <span class="v-item-imghd-hot">{{item.vnote}}</span>
                                </div>
                                <h2>{{item.vname}}</h2>
                                <p>{{item.vpublishyear +'/'}}{{item.vpublisharea+'/'}}{{item.tnamel2}}</p>
                            </a>
                            </van-col>
                        </van-row>
                    </section>
                </div>
            </van-tab>
            <van-tab :title="'美剧'">
                <div class="v-body">
                    <HomeTabItemBody tid="1"/>
                </div>
            </van-tab>
            <van-tab :title="'韩剧'">
                <div class="v-body">
                    <HomeTabItemBody tid="2"/>
                </div>
            </van-tab>
            <van-tab :title="'动漫'">
                <div class="v-body">
                    <HomeTabItemBody tid="3"/>
                </div>
            </van-tab>
            <van-tab :title="'少儿'">
                <div class="v-body">
                    <HomeTabItemChildren tid="4"/>
                </div>
            </van-tab>
            <van-tab :title="'喜剧片'">
                <div class="v-body">
                    <HomeTabItemCommon tid="4"/>
                </div>
            </van-tab>
            <van-tab :title="'纪录片'">
                <div class="v-body">
                    <HomeTabItemCommon tid="4"/>
                </div>
            </van-tab>
        </van-tabs>

        <van-tabbar v-model="tabbarActive" 
                active-color="#d81e06"
                inactive-color="#333">
            <van-tabbar-item url="#/">
                <span>首页</span>
                <i slot="icon" class="iconfont ishouye"></i>
            </van-tabbar-item>
            <van-tabbar-item url="#/home/dy">
                <span>电影</span>
                <i slot="icon" class="iconfont idianying"></i>
            </van-tabbar-item>
            <van-tabbar-item url="#/home/tv">
                <span>电视剧</span>
                <i slot="icon" class="iconfont idianshiju"></i>
            </van-tabbar-item>
            <van-tabbar-item url="#/home/zy">
                <span>综艺</span>
                <i slot="icon" class="iconfont ixinghongbangicon-"></i>
            </van-tabbar-item>
        </van-tabbar>
        <BackTop />
    </div>
</template>
<script>
import HomeTabItemBody from '../components/HomeTabItemBody';
import HomeTabItemChildren from '../components/HomeTabItemChildren';
import HomeTabItemCommon from '../components/HomeTabItemCommon';
import vscroll from "../libs/vscroll";
import { Dialog } from 'vant';
export default {
  name: "home",
  components: {
    HomeTabItemBody,HomeTabItemChildren,HomeTabItemCommon
  },
  data() {
    return {
      bannerData: [],
      tabActive: 0,
      tabbarActive: 0,
      tabScroll:{"t_0":0},
      appData:{},
      dataList:[],
    };
  },
  methods: {
    tabChange(i) {
        var key = "t_"+this.tabActive;
        if(this.tabScroll[key]){
            vscroll.scrollTo(this.tabScroll[key])
        }{
            vscroll.scrollTo(0);
        }
    },
    checkApp(){
        let that = this;
        if(this.appData){
            var v = localStorage.getItem('version') || '1.0';
            if(this.appData.version != v){
                Dialog.confirm({
                    title: '提示',
                    message: '有新版了!'
                })
                .then(() => {
                    document.location = "js://checkVersion?url="+that.$api.root+that.appData.url;
                    //下载
                    localStorage.setItem('version',that.appData.version);
                }).catch(() => {
                    // on cancel
                });
            }
        }
    }
  },
  mounted() {
    let that = this;
    vscroll.scrollUpDown(function(sTop){
        that.tabScroll["t_"+that.tabActive] = sTop;
    },function(sTop){
        that.tabScroll["t_"+that.tabActive] = sTop;
    })
    if(this.$route.query.plat){
        localStorage.setItem("plat","app");
    }
    
    that.$ajax.get(that.$api.index, {}, successRes => {
      that.bannerData = successRes.data.bannerData;
      that.appData = successRes.data.appData;
      that.dataList = successRes.data.dataList;
      that.checkApp();
    });
  },
  activated(){
      this.tabbarActive = 0;
  }
};
</script>
<style lang="less" scoped>
</style>
